<template>
	<view class="box">
		<view style="background-color: #FFFFFF;">
			<view class="box_sousuo">
				<view class="box_mainss">
					<image style="width: 34rpx;height: 34rpx;margin: 0 24rpx;" src="../../static/search_search@2x.png"
						mode=""></image>
					<input class="zhensousuo" type="text" placeholder="输入关键词进行搜索" />
				</view>
				取消
			</view>
		</view>
		<view class="list_liebiao">
			<view class="list_dashu" v-for="(project, index) in projects" :key="index">

				<view class="list_data">
					<image class="tupian" src="../../static/ico@2x (1).png" mode=""></image>
					<view class="box_text">
						<view class="xbt">
							{{ project.title }}
						</view>
						<view class="kehu">
							客户：<view class="">
								{{ project.customer }}
							</view>
						</view>
						<view class="fzrn">
							<!-- 		<view class="">

							</view> -->
							<view class="box_fuzeren">
								负责人：{{ project.manager }}
							</view>
						</view>

					</view>
				</view>
				<view class="box_anniu">
					<view class="jrxmu" @click="goproject">
						进入项目
					</view>
					<view class="khuweihu" @click="CustomerMaintenance">
						客户维护
					</view>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				projects: [{
						title: '国大项目一期',
						customer: '东阳市国大管业有限公司',
						manager: '周润发 | 实施 | ：周星驰周润发周润发 | 实施 | ：周星驰',
					},
					{
						title: '项目二',
						customer: '客户A',
						manager: '负责人A',
					},
					{
						title: '项目三',
						customer: '客户B',
						manager: '负责人B',
					}, // 确保这一行有逗号
				],
			};
		},
		mounted() {
			this.loadUserInfo()

		},
		methods: {
			loadUserInfo() {
				this.username = uni.getStorageSync('loginUsername') || '';
				this.password = uni.getStorageSync('loginPassword') || '';
			},
			goproject() {
				console.log("进入项目被点击");
				// 在这里添加跳转逻辑，例如：
				// uni.navigateTo({
				// 	url: '/pages/projectDetail/projectDetail'
				// });
			},
			CustomerMaintenance() {
				console.log("进入客户维护");
			},
			liwei() {
				let ullq = this.username
				let imaut = this.password
			}

		},
	};
</script>

<style>
	.box {
		/* padding: 0 ; */
		background-color: #F6F6F6;
		padding-bottom: 10rpx;
	}

	.box_sousuo {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin: 0rpx 20rpx;
		padding: 25rpx 0;
	}

	.box_mainss {
		display: flex;
		width: 600rpx;
		height: 70rpx;
		background: #F3F3F3;
		border-radius: 16rpx;
		align-items: center;
		margin-right: 30rpx;
	}

	.zhensousuo {
		height: 100%;
		/* background-color: pink; */
		width: 500rpx;
	}

	.list_data {
		/* margin: 20rpx 20rpx; */
		display: flex;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		align-items: center;

	}

	.list_dashu {
		margin: 20rpx 20rpx;
		/* display: flex; */
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 20rpx;
	}

	.box_text {
		padding: 30rpx 15rpx;
	}

	.box_anniu {
		display: flex;
		justify-content: space-around;
	}

	.jrxmu {
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 308rpx;
		height: 64rpx;
		background: #4FC2FD;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(30, 158, 190, 0.25);
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
	}

	.khuweihu {
		width: 308rpx;
		height: 64rpx;
		background: #4170FF;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(30, 61, 190, 0.25);
		border-radius: 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
	}

	.xbt {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		display: flex;
	}

	.kehu {
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
		display: flex;
		margin-top: 10rpx;
	}

	.fzrn {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		margin-top: 10rpx;
	}

	.tupian {
		height: 140rpx;
		width: 140rpx;
	}

	.fzrn {
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		margin-top: 10rpx;
	}

	.box_fuzeren {
		width: 520rpx;
		white-space: normal;
		/* 允许文本换行 */
		overflow-wrap: break-word;
		/* 单词换行 */
		max-width: 100%;
		/* 确保不会超出容器 */
	}
</style>